<template>
    <div class="article">
      <el-card shadow="always" class="margin_30" :body-style="{ padding: '20px' }">
        <div slot="header">
          条件查询
        </div>
        <!-- card body -->
        <el-form size="mini"  :inline="true" :model="formData" class="demo-form-inline">
         
          <el-form-item label="作者">
            <el-input v-model="formData.author" placeholder="请输入作者名称"></el-input>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="formData.title" placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item label="编辑类型">
            <el-select v-model="formData.editorType" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        
      </el-card>
      
      <el-card class="box-card margin_30">
        <div slot="header" class="clearfix">
          <el-button type="primary" @click="addArticle">新增</el-button>
        </div>
        <el-table
        :data="list"
        border
        >
        <el-table-column
          prop="title"
          label="文章标题">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="添加时间">
        </el-table-column>
        <!-- <slot></slot> -->
        <el-table-column
          prop="coverImg"
          label="展示图片">
          <!-- v-slot:a="scope" 作用域插槽 -->
          <!-- v-slot:a  具名插槽 -->
          <template v-slot="scope">
            <!-- scope  row, column, $index 和 store -->
           {{ scope.$index }} <img class="pic" :src="scope.row.coverImg" alt=""> 
          </template>
        </el-table-column>
        <el-table-column
          prop="coverImg"
          label="文章是否显示">
          <!-- v-slot:a="scope" 作用域插槽 -->
          <!-- v-slot:a  具名插槽 -->
          <template v-slot="scope">
            <el-switch
            v-model="scope.row.isShow"
            @change="uptArticleStatus(scope.row)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="coverImg"
          label="内容">
          <!-- v-slot:a="scope" 作用域插槽 -->
          <!-- v-slot:a  具名插槽 -->
          <template v-slot="scope">
            <el-button type="primary" plain>{{ scope.row.editorType ? 'markdown' : '富文本' }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="coverImg"
          label="操作">
          <!-- v-slot:a="scope" 作用域插槽 -->
          <!-- v-slot:a  具名插槽 -->
          <template v-slot="scope">
            <el-link type="primary" :underline="false" class="el-icon-view" @click="editArticle(scope.row.id)">编辑文章</el-link>
            <el-link type="danger" :underline="false" style="margin-left: 10px;" @click="deleteArticle(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 
        size-change pageSize 改变时会触发 
        current-change currentPage 改变时会触发
        current-page 当前页数
        page-size 每页显示条目个数
        total 总条目数
      -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="start"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      </el-card>
     
    </div>
</template>

<script>
import {
  findArticles,
  changeShowStatus,
  del
} from "@/api/contentManage/article/index"
export default{
    data() {
        return {
          start:1,
          limit:5,
          formData:{
            "author": "",
            "collectCount": "",
            "content1": "",
            "content2": "",
            "coverImg": "",
            "createTime": "",
            "editorType": "",
            "id": "",
            "isShow": "",
            "modifyTime": "",
            "summary": "",
            "title": "",
            "viewCount": "",
            "zanCount": ""
          },
          list:[],
          options:[
            {
              label:"富文本",
              value:0
            },
            {
              label:"markdown",
              value:1
            },
          ],
          total:0
        };
    },
    computed: {

    },
    created() {
      this.init()
    },
    mounted() {

    },
    methods: {
      editArticle(id){
        this.$router.push(`/contentManage/uptArticle?id=${id}`)
      },
      addArticle(){
        this.$router.push("/contentManage/addArticle")
      },
      deleteArticle(id){
        del(id)
        .then(res =>{
          this.init()
        })
      },
      uptArticleStatus(val){
        changeShowStatus({
          isShow:val.isShow ? 1 : 0,
          id:val.id
        })
        .then(res =>{
          console.log(res)
        })
      },
      handleSizeChange(val){
        console.log(val)
        this.limit = val;
        this.init()
      },
      handleCurrentChange(val){
        console.log(val);
        this.start = val;
        this.init();
      },
      onSubmit(){
        this.init()
      },
      init(){
        findArticles(this.start,this.limit,this.formData)
      .then(res =>{
        console.log(res)
        res.data.rows.forEach(ele =>{
          ele.isShow = ele.isShow ? true : false
        })
        this.list = res.data.rows;
        this.total = res.data.total
      })
      }
    },
};
</script>

<style scoped lang="scss">

.article{
  .pic{
    width: 100px;
    height: 100px;
  }
}
</style>
